<template>
  <div
    @click="handleClick"
    class="flex flex-col items-center w-8 h-8 border-solid border border-teal-400 rounded"
  >
    <div class="mt-0.5">
      <van-icon :name="icon" size="1rem" />
    </div>
    <span class="m-auto">{{ title }}</span>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({
  icon: "",
  title: "",
  link: "",
});

const handleClick = () => {
  router.push(props.link);
};
</script>
